<template>
  <div class="header">
    <div>
      <OrderQueryStandard v-model:title='title' ref="queryRef" @queryClick="inquiry" @resettingClick = 'resetting' :statusOrder="1"/>
    </div>
    <div>
      <el-card class="box-card">
        <template #header>
          <div class="customerTitle1">
            <span class="leve2_title titleHead1" >订单列表</span>
            <div >
<!--              <el-button
                class="customerButton2"
                type="danger"
                @click="publicPopup(4)"
              >
                草稿删除
              </el-button>-->
              <el-button
                class="customerButton1"
                plain
                type="primary"
                @click="cancellation"
              >
                单据取消
              </el-button>
              <el-button
                class="customerButton1"
                plain
                type="primary"
                @click="publicPopup(3)"
              >
                审核撤回
              </el-button>
<!--              <el-button
                class="customerButton1"
                plain
                size="small"
                type="primary"
                @click="upData"
              >
                变更
              </el-button>-->
<!--              <el-button
                class="customerButton1"
                plain
                size="small"
                type="primary"
                @click="copyList"
              >
                复制
              </el-button>-->
              <el-button
                plain
                type="primary"
                @click="publicPopup(1)"
              >
                确认收货
              </el-button>
              <el-button type="primary" @click="create">
                新建
              </el-button>
            </div>
          </div>
        </template>
        <div class="tabStyle">
          <el-table
            v-loading="loading"
            load="false"
            ref="singleTableRef"
            :data="customer_order_list"
            height="300px"
            style="width: 100%"
            @sort-change="sortList"
            @current-change="handleSelectionChange"
            row-key="id"
            :tooltip-options="{ enterable: true, placement: 'top' }"
            tooltip-effect="dark"
            highlight-current-row
          >
            <el-table-column  align="center" width="40" fixed="left" show-overflow-tooltip>
              <template #default="scope">
                <div class="table_style">
                  <label class="el-checkbox"
                         :class="{ 'is-checked': radioIndex && radioIndex.id === scope.row.id }"
                         @click="handleRadio(scope.row,$event)"
                         v-if="scope.row.status != 5"
                  >
                    <span class="el-checkbox__input" :class="{ 'is-checked':  radioIndex && radioIndex.id === scope.row.id  }"><span class="el-checkbox__inner"></span></span>
                  </label>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="序号" align="center" width="80" fixed="left">
              <template #default="scope">
                <div class="table_style">
                  <span style="margin-left: 5px"
                        v-text="(currentPage - 1) * pageSize + (scope.$index + 1)"
                  ></span>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="单据号" align="center" min-width="150" fixed="left" show-overflow-tooltip>
              <template #default="scope">
               <span
                 class="textFont"
                 @click="particulars(scope.row,$event)"
               >
                 {{scope.row.uid || '--' }}
               </span>
              </template>
            </el-table-column>
            <el-table-column label="客户" align="center" min-width="150" show-overflow-tooltip>
              <template #default="scope">
               <span
                 class="ellipsis textLeft"
               >
                 {{scope.row.customer_names || '--' }}
               </span>
              </template>
            </el-table-column>
            <el-table-column label="销售组织" align="center" min-width="150" show-overflow-tooltip>
              <template #default="scope">
               <span
                 class="ellipsis textLeft"
               >
                 {{scope.row.sales_org_names || '--' }}
               </span>
              </template>
            </el-table-column>
            <el-table-column label="单据状态" align="center" width="120" show-overflow-tooltip>
              <template #default="scope">
                <span
                  class="ellipsis"
                  style="cursor: default;text-align: left "
                >
                  <el-tag
                    :color="colorStatus(scope.row.status_str)"
                    style="color: #fff;border-width: 0"
                  >
                  {{scope.row.status_str || '--'}}
                </el-tag>
               </span>
              </template>
            </el-table-column>
            <el-table-column label="销售数量" min-width="110" align="center" show-overflow-tooltip>
              <template #default="scope">
               <span
                 class="numberMoney"
               >
                 {{ _FieldFormat(scope.row.sales_num,  '')}}
<!--                  <el-tooltip
                    placement="top"
                    :content="items?.comment || '&#45;&#45;'"
                  >

                  </el-tooltip>-->
               </span>
              </template>
            </el-table-column>
            <el-table-column label="出库数量" align="center" width="110">
              <template #default="scope">
               <span
                 class="ellipsis number"
                 v-text="_FieldFormat('--',  '')"
               ></span>
              </template>
            </el-table-column>
            <el-table-column label="销售金额" align="center" width="110" show-overflow-tooltip>
              <template #default="scope">
               <span
                 style="width: 100%"
                 class="numberMoney"
               >
                 {{'￥'+_FieldFormat(scope.row.discount_amount,  '')}}
               </span>
              </template>
            </el-table-column>
            <el-table-column label="销售员" align="center" width="100" show-overflow-tooltip>
              <template #default="scope">
               <span
                 class="ellipsis number"
                 v-text="_FieldFormat(scope.row.sales_user_name,  '')"
               ></span>
              </template>
            </el-table-column>
            <el-table-column label="销售部门" align="center" width="100" show-overflow-tooltip>
              <template #default="scope">
               <span
                 class="ellipsis number"
                 v-text="_FieldFormat(scope.row.sales_dept_name,  '')"
               ></span>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="120" fixed="right">
              <template #default="scope">
                <el-button v-if="scope.row.status == 0 || scope.row.status == 1 || scope.row.status == 21  || scope.row.status == 19  " link type="primary" @click="treatment_list(scope.row,$event)">
                  去处理
                </el-button>
                <el-button v-else link type="primary" @click="particulars(scope.row,$event)">
                  查看详情
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="customerPagination">
          <el-pagination
            background
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            layout="total, prev, pager, next,sizes, jumper"
            :page-sizes="[20, 50, 100, 200]"
            small="small"
            :total="count_number"
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
          />
        </div>
      </el-card>
    </div>
    <el-card id="productId">
      <template #header>
        <div class="customerTitle1">
          <span class="leve2_title leave3Title titleHead1">产品信息<span class="title1"> <span v-if="saleOrderDetail" class="title2">单据号</span>{{saleOrderDetail?.uid || ''}}</span></span>
        </div>
      </template>
      <div>
        <el-table	:tooltip-options="{ enterable: true, placement: 'top' }" tooltip-effect="dark"  :data="saleOrderDetail?.goods"  max-height="300px" >
          <el-table-column label="序号" align="center" width="60">
            <template #default="scope">
              <div class="table_style">
               <span style="margin-left: 5px" v-text=" (scope.$index + 1)"
               ></span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="订单编号" align="center" width="150" show-overflow-tooltip>
            <template #default="scope">
                       <span
                         class="ellipsis"
                       >
                         {{scope.row.order_uid || '--' }}
                       </span>
            </template>
          </el-table-column>
          <el-table-column label="订单流转状态" align="center" width="120">
            <template #default="scope">
                       <span
                         class="ellipsis textFont"
                       >
                          <el-tag @click="flowClick(scope.row.status)" class=" textFont">{{ scope.row.status_str || '--' }}</el-tag>
                       </span>
            </template>
          </el-table-column>
          <el-table-column label="客户" align="center" min-width="225" show-overflow-tooltip>
            <template #default="scope">
                       <span
                         class="ellipsis"
                         v-text="_FieldFormat(scope.row.customer_name,  '')"
                       ></span>
            </template>
          </el-table-column>
          <el-table-column label="销售组织" align="center" width="210" show-overflow-tooltip>
            <template #default="scope">
                         <span
                           class="ellipsis"
                           v-text="_FieldFormat(scope.row.sales_org_name,  '')"
                         ></span>
            </template>
          </el-table-column>
          <el-table-column label="产品类型" align="center" width="90" show-overflow-tooltip>
            <template #default="scope">
                           <span
                             class="ellipsis"
                             v-text="_FieldFormat(scope.row.goods_type,  '')"
                           ></span>
            </template>
          </el-table-column>
          <el-table-column label="产品编码" align="center" width="140" show-overflow-tooltip>
            <template #default="scope">
                           <span
                             class="ellipsis"
                             v-text="_FieldFormat(scope.row.goods_no,  '')"
                           ></span>
            </template>
          </el-table-column>
          <el-table-column label="产品名称" align="center" width="200" show-overflow-tooltip>
            <template #default="scope">
                           <span
                             class="ellipsis"
                             v-text="_FieldFormat(scope.row.goods_name,  '')"
                           ></span>
            </template>
          </el-table-column>
          <el-table-column label="条码" align="center" width="150">
            <template #default="scope">
              <span
                class="ellipsis"
              >
              {{scope.row.barcode || '--'}}
             </span>
            </template>
          </el-table-column>
          <el-table-column label="规格型号" align="center" width="100" show-overflow-tooltip>
            <template #default="scope">
                           <span
                             class="ellipsis"
                             v-text="_FieldFormat(scope.row.spec_name,  '')"
                           ></span>
            </template>
          </el-table-column>
          <el-table-column label="销售数量" align="center" width="90" show-overflow-tooltip>
            <template #default="scope">
                           <span
                             class="ellipsis numberMoney"
                             v-text="_FieldFormat(scope.row.sales_num,  '')"
                           ></span>
            </template>
          </el-table-column>
          <el-table-column label="出库数量" align="center" width="90" show-overflow-tooltip>
            <template #default="scope">
                           <span
                             class="ellipsis numberMoney"
                             v-text="_FieldFormat(Number(scope.row.actual_num).toFixed(0),  '')"
                           ></span>
            </template>
          </el-table-column>
          <el-table-column label="批次号" align="center" width="100" show-overflow-tooltip>
            <template #default="scope">
                           <span
                             class="ellipsis"
                             v-text="_FieldFormat(scope.row.batch_no,  '')"
                           ></span>
            </template>
          </el-table-column>
          <el-table-column label="有效期至" align="center" width="180" show-overflow-tooltip>
            <template #default="scope">
                           <span
                             class="ellipsis"
                             v-text="_FieldFormat(scope.row.expire_date,  '')"
                           ></span>
            </template>
          </el-table-column>
          <el-table-column label="仓库" align="center" width="150" show-overflow-tooltip>
            <template #default="scope">
                           <span
                             class="ellipsis"
                             v-text="_FieldFormat(scope.row.warehouse_name,  '')"
                           ></span>
            </template>
          </el-table-column>
          <el-table-column label="出库单号" align="center" width="150" show-overflow-tooltip>
            <template #default="scope">
                           <span
                             class="ellipsis"
                             v-text="_FieldFormat(scope.row.stockout_no,  '')"
                           ></span>
            </template>
          </el-table-column>
          <el-table-column label="售后单号"  width="180" align="center" show-overflow-tooltip>
            <template #default="scope">
                        <span
                          v-for="(items,index) in  objectArray(scope.row.order_aftersale_uid)"
                          :key="index"
                          class="ellipsis textFont"
                          @click="serviceOrder(items)"
                        >
                         {{items || '--'}}
                       </span>
              <!--                       <span
                                       class="ellipsis textFont"
                                       v-text="_FieldFormat(scope.row.aftersale_uid, '')"
                                       @click="serviceOrder(scope.row.aftersale_uid)"
                                     ></span>-->
            </template>
          </el-table-column>
          <el-table-column label="售后状态"  width="140" align="center" show-overflow-tooltip>
            <template #default="scope">
                       <span
                         class="ellipsis "
                         v-text="_FieldFormat(scope.row.order_aftersale_status_text, '')"
                       ></span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
    <FlowDialog ref="flowRef" />
<!--    <OrderSelect ref="orderSelectRef" />-->
    <TakeOver  ref="takeOver" @addressSubmit="addressSubmit" />
    <SetAddress ref="setAddress" @addressSubmit="addressSubmit" />
  </div>
</template>

<script setup lang="ts">

import router from "/@/router";
defineOptions({
  name: 'StandardOrder',
})
import {ref} from "vue";
import OrderQueryStandard from '../component/OrderQueryStandard.vue'
import {DateFormat, FieldFormat} from "/@/utils/utils";
import {orderCancel, orderList} from "/@/api/dms/order";
import TakeOver from '../orderQuery/component/TakeOver.vue';
import SetAddress from '../orderQuery/component/SetAddress.vue'
import {objectArray,colorStatus} from '../orderText'
import dayjs from "dayjs";
import {ElMessage, ElMessageBox} from "element-plus";
import {orderGroupCancel, orderGroupCancelApproval, orderGroupCopy, orderGroupList} from "/@/api/dms/order/group";
import {orderConfirmReceipt} from "/@/api/dms/order/confirm";
import FlowDialog from "/@/views/order_management/standardOrder/component/FlowDialog.vue";
const _FieldFormat = (value: string, type = '') => {
  return FieldFormat(value, type)
}
const flowRef = ref<any>(undefined)
//确认收货
const takeOver = ref<any>(undefined)
//更改地址
const setAddress = ref<any>(undefined)
const queryRef = ref<any>({})
const orderSelectRef=ref<any>(null)
const title = ref('标准销售订单')
const loading=ref(false)
const pageSize = ref(20)
const currentPage = ref(1)
const count_number = ref(0)
const customer_order_list = ref<any>([])
const queryList =ref<any>({})
const singleTableRef = ref<any>(undefined)
// 单选
const radioIndex = ref<any>(undefined)
//分页
const handleCurrentChange = (val: number) => {
  currentPage.value = val
  getOrderList(queryList.value)
}
// 售后订单跳转
const serviceOrder =(va:any)=>{
  if(va != null && va !=''){
    router.push(`/sales/salesDetails?path=4&uid=${va}`)
  }
}
const handleSizeChange = (val: number) => {
  pageSize.value = val
  getOrderList(queryList.value)
}
// 去处理
const treatment_list=(row:any,event:any)=>{
  event.stopPropagation();
  localStorage.setItem('orderPath','1')
  router.push(`/order/addOrder?path=3&id=${row.uid}`)

}
// 详情
const particulars  = (row:any,event:any)=>{  //c_order_uid
  event.stopPropagation();
  localStorage.setItem('orderPath','1')
  router.push(`/order/addOrder?path=5&id=${row.uid}`)
  }

//变更
const upData=()=>{
  localStorage.setItem('orderPath','1')
  if(radioIndex){
    router.push(`/order/addOrder?path=3&id=${radioIndex.value.uid}`)
  }

}
// 单选
const handleRadio = (row: any,event:any) => {
  event.stopPropagation();
  // if(row.status == 5) return
  // radioIndex.value = row
  if (radioIndex.value && radioIndex.value.uid == row.uid  )  {
    radioIndex.value = undefined
    return
  }
  radioIndex.value = row
}
let saleOrderDetail = ref<any>(undefined)
// 多选
const handleSelectionChange = (val: any, va: any) => {
  // if(va == null) return
  saleOrderDetail.value = val
  /*document
    .getElementById('productId')
    ?.scrollIntoView({ behavior: 'instant', block: 'center' , inline: "nearest"})*/
}
// 获取列表
const getOrderList =async (value:object = {},type=0)=>{
  loading.value=true
  await orderGroupList({type:1,page:currentPage.value,pagesize:pageSize.value,...value}).then((data:any)=>{
    if(data.code == 200){
      loading.value=false
      count_number.value =  data.data.count
      customer_order_list.value = data.data.list
      saleOrderDetail.value = data.data.list[0]
      singleTableRef.value!.setCurrentRow(data.data.list[0])
      if(type==1){
        ElMessage.success(`查询成功`)
      }else if(type == 2){
        ElMessage.success(`重置成功`)
      }
    }
  })
}
// *******新建****************
const create=()=>{
  router.push('/order/addOrder?path=3')
  localStorage.setItem('orderPath','1')
  // orderSelectRef.value.dialogVisibles = true
}
// 订单状态

// 查询重置
const inquiry = (va:any)=>{
  const data = {
    uid: va.uid,
    status:va.status.toString(),
    order_uid:va.order_uid,
    goods_name: va.goods_name.toString(),
    goods_no:va.goods_no.toString(),
    order_status:va.order_status.toString(),
    sales_org_id: va.sales_org_id.toString(),
    customer_uid: va.customer_uid.toString(),
    amount_start: va.amount_start,
    amount_end:va.amount_end,
    sales_user_name: va.sales_user_name.toString(),
    barcode:va.barcode.toString(),
  }
  radioIndex.value=undefined
  queryList.value = { ...queryList.value,...data}
  getOrderList(queryList.value,1)
}
const resetting = (va:any)=>{
  const data = {
    uid: va.uid,
    status:va.status.toString(),
    order_uid:va.order_uid,
    goods_name: va.goods_name.toString(),
    goods_no:va.goods_no.toString(),
    order_status:va.order_status.toString(),
    sales_org_id: va.sales_org_id.toString(),
    customer_uid: va.customer_uid.toString(),
    amount_start: va.amount_start,
    amount_end:va.amount_end,
    sales_user_name: va.sales_user_name.toString(),
    barcode:va.barcode.toString(),
  }
  queryList.value = { ...queryList.value,...data}
  radioIndex.value=undefined
  getOrderList(queryList.value,2)
}
// 复制
const copyList = ()=>{
  if(radioIndex.value){
    localStorage.setItem('orderPath','1')
    orderGroupCopy({uid:radioIndex.value.uid}).then((data: any) => {
      if (data.code == 200) {
        router.push(`/order/addOrder?path=3&id=${data.data.uid}`)
      }
    })
  }else {
    ElMessage.warning(`请先选择订单`)
  }
}
// 订单取消
const cancellation = ()=>{
  if(radioIndex.value  && radioIndex.value.status != '110'){
    ElMessageBox.confirm(
      `订单取消后无法执行后续操作，请确认是否取消 单据编号为：${radioIndex.value.uid || '--'}的订单。`,
      {
        confirmButtonText: '确定',
        cancelButtonText: '返回',
        type: 'warning',
      }
    )
      .then(() => {
        orderGroupCancel({uid:radioIndex.value.uid}).then((data:any)=>{
          if (data.code == 200){
            radioIndex.value = undefined
            ElMessage.success(`取消成功`)
            getOrderList(queryList.value)
          }
        })
      })
  }else {
    ElMessage.warning(`请先选择正确的订单`)
  }
}
// 订单排序
const sortList = ( column:any, prop:any, order:any )=>{
  if (column.order == null || column.order == "descending" ){
    queryList.value = { ...queryList.value,column:column.prop,direction:'asc'}
    getOrderList(queryList.value)
  }else if(column.order == "ascending"){
    queryList.value = { ...queryList.value,column:column.prop,direction:'desc'}
    getOrderList(queryList.value)
  }

}
const publicPopup = (type:any)=>{
  if(radioIndex.value && radioIndex.value.status != '110'){
    if(type == 1){
      if(radioIndex.value && radioIndex.value.status == 79 ||  radioIndex.value.status == 82){
        takeOver.value.openUp = true
        takeOver.value.uid =radioIndex.value.uid
        takeOver.value.type = 3
      }else if(radioIndex.value && radioIndex.value.status == '100'){
        ElMessage({
          message: '已完成的订单无需再次进行确认收货',
          type: 'warning',
        })
      }else {
        ElMessage({
          message: '该订单状态不允许确认收货',
          type: 'warning',
        })
      }
    } else if(type == 2){
      setAddress.value.openUp = true
      setAddress.value.uidList =radioIndex.value
    }else if(type == 3){
      if(radioIndex.value.status == '2'){
        ElMessageBox.confirm(
          `订单审核撤回后无法执行后续操作，请确认是否撤回 单据编号为：${radioIndex.value.uid || '--'}的订单。`,
          {
            confirmButtonText: '确定',
            cancelButtonText: '返回',
            type: 'warning',
          }
        )
          .then(() => {
            orderGroupCancelApproval({uid:radioIndex.value.uid}).then((data:any)=>{
              if (data.code == 200){
                radioIndex.value = undefined
                ElMessage.success(`审核撤回成功`)
                getOrderList(queryList.value)
              }
            })
          })
      }else {
        ElMessage.warning(`单据状态只有在待审核时才能审核撤回`)
      }
    } else if(type == 4) {
      if(radioIndex.value.status == '0'){
        ElMessageBox.confirm(
          `订单删除后无法执行后续操作，请确认是否删除 单据编号为：${radioIndex.value.uid || '--'}的订单。`,
          {
            confirmButtonText: '确定',
            cancelButtonText: '返回',
            type: 'warning',
          }
        )
          .then(() => {
           /* orderGroupCancelApproval({uid:radioIndex.value.uid}).then((data:any)=>{
              if (data.code == 200){
                radioIndex.value = undefined
                ElMessage.success(`审核撤回成功`)
                getOrderList(queryList.value)
              }
            })*/
          })
      }else { ElMessage.warning(`单据状态只有是草稿时才能删除`)}
    }
    // getOrderList(queryList.value)
  }else {
    ElMessage.warning(`请先选择订单`)
  }

}
//确认收货地址
const addressSubmit =(va:any)=>{
  radioIndex.value = undefined
  getOrderList(queryList.value)
}
//流程图
const flowClick = (va:any)=>{
  flowRef.value.open(va)
}
const reviewWithdrawal = ()=>{}
onActivated(()=>{
  getOrderList(queryList.value)
  radioIndex.value = undefined
  saleOrderDetail.value = undefined
})
</script>

<style lang="scss" scoped>
@import "../index";

</style>

